<!-- 赛区模块 -->
<template>
	<view class="container">
		<view class="c-headline" :style="{'background-image':`url(${imageURL}title-notes.png)`}">
			<view class="headline-content">
				<text>{{info.round_nums_name}}</text>
			</view>
		</view>
		<view class="c-block">
			<view class="block-item" v-for="item in info.match_list" :key="item.id"
				:style="{'background-image':item.img?`url(${baseURL + item.img})`:'none'}"
				@click="toGameDivisionDetail(item)">
				<view class="block-item_title">
					<text>{{item.area_group_name}}</text>
				</view>
				<view class="block-item_status">
					<text v-if="item.match_status==0">比赛暂未开放</text>
					<text v-else-if="item.match_status==1">正在报名中</text>
					<text v-else-if="item.match_status==2">正在比赛中</text>
					<text v-else-if="item.match_status==3">比赛已结束</text>
					<text v-else-if="item.match_status==4">比赛暂停</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Division",
		props: ["info"],
		data() {
			return {

			}
		},
		methods: {
			// 跳转赛区详情
			toGameDivisionDetail(param) {
				let {
					type_id,
					round_nums_id,
					area_group_id
				} = param
				uni.setStorageSync('signUp', {
					type_id,
					round_nums_id,
					area_group_id
				})
				this.navigateTo(
					`/pages/pages_game/gameDivisionDetail?id=${param.area_group_id}&name=${param.area_group_name}`)
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 0;

		.c-headline {
			padding: 30rpx 0;
			font-size: 40rpx;
			font-weight: 600;
		}

		.c-block {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.block-item {
				width: 340rpx;
				height:170rpx;
				padding: 15rpx;
				box-sizing: border-box;
				background-color: #eee;
				margin-bottom: 30rpx;
				background-size: 100% 100%;
				box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
				// border-radius: 8rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				-webkit-backdrop-filter: blur(5px);
				backdrop-filter: blur(5px);
				color: #fff;
				text-shadow: 0 0 10rpx #111;
				.block-item_title {
					font-size: 36rpx;
					font-weight: 600;
					text-align: left;

				}

				.block-item_status {
					text-align: right;


				}
			}
		}
	}
</style>
